<style lang="less">
  .div-order-price-affirm-sty {
    .el-table .info-row {
      background: #FFAEB9;
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple {
      background: #ffffff;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .f-wa {
      width: auto;
    }
    .f-mt10 {
      margin-top: 10px;
    }
    .f-ml10 {
      margin-left: 10px;
    }
    .f-mb10 {
      margin-bottom: 10px;
    }
    li {
      list-style-type: none;
    }
    .f-mt5 {
      margin-top: 5px;
    }
    .f-mb5 {
      margin-bottom: 5px;
    }
    .f-tc {
      color: #20a0ff;
    }
    .f-txc {
      text-align: center;
    }
    .f-pa {
      position: absolute;
    }
    .f-w20 {
      width: 20px;
    }
    .f-h20 {
      height: 20px;
    }
    .excellent-route-sty{
      color: white;  background-color:#66B1FF;width: 35px;display: inline-block;margin-left: 5px;text-align: center;line-height:19px
    }
  }
</style>
<template>
  <section class="div-order-price-affirm-sty">

    <!--列表-->
    <div class="grid-content">
      <!--<search-bar>-->
        <!--<el-row :data="searchCondition">-->
          <!--<el-col :span="8">-->
            <!--<el-form-item label="版本类型">-->
              <!--<el-select v-model="searchCondition.versionType" placeholder="请选择版本类型">-->
                <!--<el-option-->
                  <!--v-for="item in $store.getters.VERSION_TYPE"-->
                  <!--:key="item.dictVal"-->
                  <!--:label="item.cnDictValname"-->
                  <!--:value="item.dictVal">-->
                <!--</el-option>-->
              <!--</el-select>-->
            <!--</el-form-item>-->
          <!--</el-col>-->
        <!--</el-row>-->
      <!--</search-bar>-->
      <el-col style="padding-bottom: 10px">
        <el-button type="primary" @click="resetSearchCondition" style="float: right">重置</el-button>
        <el-button type="primary" @click="searchTableList" style="float: right;margin-right: 10px">查询</el-button>
      </el-col>
      <el-table :data="orderTableData" border
                :row-class-name="tableRowClassName">
        <el-table-column type="index" width="60" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="date" label="订单信息" width="250">
          <template slot-scope="scope">
            <li class="f-font-20 f-mb5">
              <div style="display: inline-block">
                <a style="cursor: pointer;text-decoration:underline;color: #20a0ff"
                   @click="orderSelectDialog(scope.row)">
                  {{scope.row.orderNumber}}
                </a>
              </div>
              <div style="display: inline-block;margin-left: 10px">
                <!--<div v-if="scope.row.orderStatus !== 101001001" style="display: inline-block;margin-left: 10px">-->
                <label v-if="scope.row.noticeDeliveryStatus === 101022002"
                       style="cursor: pointer;color: #FF7467;border: 1px solid #FF7467;padding-left: 2px;padding-right: 2px"
                >等通知放货</label>
                <label v-if="scope.row.noticeDeliveryStatus === 101022003"
                       style="cursor: pointer;color: #52B436;border: 1px solid #52B436;padding-left: 2px;padding-right: 2px">已确认放货</label>
              </div>
            </li>
            <li>
              {{scope.row.shipmentsProvince}}{{scope.row.shipmentsCity}}{{scope.row.shipmentsCounty}}{{scope.row.shipmentsTown}}
              <img src="../../assets/start-address.gif" class="f-w20 f-h20 f-pa">
            </li>
            <li>
              {{scope.row.sendProvince}}{{scope.row.sendCity}}{{scope.row.sendCounty}}{{scope.row.sendTown}}
              <img src="../../assets/end-address.gif" class="f-w20 f-h20 f-pa">
            </li>
            <li v-if="scope.row.excellentRouteServiceDetailNames">
              <div v-for="(item,index) in (scope.row.excellentRouteServiceDetailNames.split(','))" :key="index" class="excellent-route-sty">
                {{item}}
              </div>
            </li>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="计划时间" width="250">
          <template slot-scope="scope">
            <li>提交时间&nbsp;&nbsp;{{scope.row.createDate}}</li>
            <li>
              发运日期&nbsp;&nbsp;{{scope.row.shipmentsDate}}
            </li>
            <li v-if="scope.row.extractType===105002001">
              计划提货&nbsp;&nbsp;{{scope.row.extractDate}} {{scope.row.extractTime}}
            </li>
            <li v-if="scope.row.extractType===105002002">
              {{scope.row.extractTypeName}}&nbsp;&nbsp;{{scope.row.startNetWorkName}}
            </li>
            <li v-if="scope.row.sendType===105001001">计划送抵&nbsp;&nbsp;{{scope.row.sendTime}}</li>
            <li v-if="scope.row.sendType===105001002">
              {{scope.row.sendTypeName}}&nbsp;&nbsp;{{scope.row.endNetWorkName}}
            </li>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="货物信息" width="110">
          <template slot-scope="scope">
            <div class="f-txc">
              <li v-if="scope.row.orderCargos.length>0">{{scope.row.orderCargos[0].cargoName}}&nbsp;&nbsp;</li>
              <li v-if="scope.row.orderCargos.length>0">{{scope.row.orderCargos[0].amount}}&nbsp;&nbsp;件</li>
              <li v-if="scope.row.orderCargos.length>0">{{scope.row.orderCargos[0].weight}}&nbsp;&nbsp;吨
              </li>
              <li v-if="scope.row.orderCargos.length>0">{{scope.row.orderCargos[0].volume}}&nbsp;&nbsp;方
              </li>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="订单金额（元）" width="120">
          <template slot-scope="scope">
            <div class="div-w100 f-tc f-txc">
              <li>{{scope.row.paymentTypeName}}</li>
              <li class="f-c-red f-mt10">{{scope.row.orderPrice}}元</li>
              <li class="f-mt10" style="color: red">{{scope.row.payStatusName}}</li>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="发货人信息" width="240">
          <template slot-scope="scope">
            <li>
              发货客户：{{scope.row.memberUserName}}
            </li>
            <li>
              {{scope.row.shipmentsContactName}}
            </li>
            <li>
              {{scope.row.shipmentsContactPhone}}
              <label
                v-if="scope.row.shipmentsContactPhone!=''&&scope.row.shipmentsContactPhone!=null&&scope.row.shipmentsContactPhone!=undefined&&scope.row.shipmentsTelephone!=''&&scope.row.shipmentsTelephone!=null&&scope.row.shipmentsTelephone!=undefined">,</label>
              {{scope.row.shipmentsTelephone}}
            </li>
            <li>
              {{scope.row.shipmentsStreet}}
            </li>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="收货人信息" width="240">
          <template slot-scope="scope">
            <li>
              {{scope.row.sendContactName}}
            </li>
            <li>
              {{scope.row.sendContactPhone}}
              <label
                v-if="scope.row.sendContactPhone!=''&&scope.row.sendContactPhone!=null&&scope.row.sendContactPhone!=undefined&&scope.row.sendTelephone!=''&&scope.row.sendTelephone!=null&&scope.row.sendTelephone!=undefined">,</label>
              {{scope.row.sendTelephone}}
            </li>
            <li>
              {{scope.row.sendStreet}}
            </li>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="状态" min-width="100">
          <template slot-scope="scope">
            <li>
              {{scope.row.orderStatusName}}
            </li>
            <li>
              {{scope.row.agingName}}
            </li>
            <li v-if="scope.row.affirmPrice" style="color: red;border: 1px dotted red;padding: 2px">
              专线已审核<br>价格:{{scope.row.affirmPrice}}元
            </li>
          </template>
        </el-table-column>
        <el-table-column fixed="right" prop="address" label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="primary"  class="f-wa f-ml10 f-mt5 f-mb5"
                       @click="affirmPrice(scope.row)">价格确认
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页信息工具条-->
      <el-col class="f-mt10" :span="24">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total,sizes,prev,pager,next,jumper"
          :total="total" style="float: right">
        </el-pagination>
      </el-col>
      <!--定价运输专线价格确认-->
      <el-dialog title="价格确认" :visible.sync="affirmPriceDialog" width="350px">
        <el-form :key="affirmPriceDialogKey" ref="affirmPriceForm" :inline="true" :model="affirmPriceForm" label-width="120px">
          <div>
            <label>货主干线定价:{{affirmPriceForm.truckValue}}</label>
          </div>
          <el-form-item labelWidth="20px">
            <label>本专线已经认真评估此订单信息,确认并同意以下定价报价承运此票订单</label>
          </el-form-item>
          <el-form-item labelWidth="110px" label="审定定价价格" prop="affirmPrice" :rules="{ required: true, message: '请输入审定定价价格', trigger: 'change' }">
            <el-input type="number" style="width: 220px" v-model="affirmPriceForm.affirmPrice"></el-input>
          </el-form-item>
          <el-form-item style="float: right">
            <el-button style="width: auto;" type="primary" @click="affirmPriceClick">确认</el-button>
            <el-button style="width: auto" @click="affirmPriceDialog=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--订单查看Dialog-->
      <el-dialog title="订单查看" :visible.sync="orderSelect" width="80%">
        <order-select :title="orderSelectForm"></order-select>
      </el-dialog>
    </div>
  </section>
</template>
<script>
import {
  orderAffirmPrice,
  getOrderTableData,
  getOrderCostDetail
} from '../../api/order/order.js';
import { resetObjNull, objToFilter } from '../../lib/util.js';
import OrderSelect from './OrderSelectDialog.vue';

export default {
  components: {
    'order-select': OrderSelect
  },
  data () {
    return {
      searchCondition: {
      },
      affirmPriceDialog: false,
      affirmPriceDialogKey: 0,
      affirmPriceForm: {},
      token: this.$store.state.token,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      orderTableData: [],
      orderSelect: false,
      orderSelectForm: {}
    };
  },
  methods: {
    // 价格确认
    affirmPrice (val) {
      this.affirmPriceDialogKey = Math.random() - 0.5;
      // 获取订单下单时的干线运费（定价价格）
      getOrderCostDetail({
        filters: 'EQ_order.id=' + val.id + ';EQ_costCode=101005002; '
      }).then((res) => {
        if (res.data.successFlg) {
          let dataList = res.data.detailModelList;
          if (dataList && dataList.length > 0) {
            this.affirmPriceForm.truckValue = dataList[0].costPrice;
            this.affirmPriceForm.affirmPrice = dataList[0].costPrice;
          }
        };
        this.affirmPriceDialog = true;
        this.affirmPriceForm.id = val.id;
      });
    },
    // 价格确认提交
    affirmPriceClick () {
      this.affirmPriceDialog = true;
      this.$refs['affirmPriceForm'].validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          orderAffirmPrice(this.token, this.affirmPriceForm.id, this.affirmPriceForm.affirmPrice, this.$store.state.userId).then(res => {
            if (res.data.successFlg) {
              this.$message.success('操作成功！');
              this.affirmPriceForm.affirmPrice = null;
              this.affirmPriceDialog = false;
              this.searchOrdersByOrderStatus(this.fs);
            } else {
              this.$message.error(res.data.errorMsg);
            }
          });
          this.submitLoading = false;
        } else {
          console.log('error submit!!');
          return false;
        };
      });
    },
    tableRowClassName (o) {
      return o.row.agingDictEntityId === 112006003 ? 'info-row' : '';
    },
    // 查看订单
    orderSelectDialog (val) {
      this.orderSelect = true;
      this.orderSelectForm = val;
    },
    searchTableList () {
      let filters = objToFilter(this.searchCondition);
      filters = 'LIKE_organizationId=' + this.$store.state.currentOrganizationId + ',' + ';EQ_orderStatus=101001002;EQ_agingDictEntityId=112006003;ISNULL_affirmPrice;';
      console.log(filters);
      getOrderTableData({
        filters: filters,
        sorts: '-createDate',
        size: this.pageSize,
        page: this.currentPage
      }).then((res) => {
        if (res.data.successFlg) {
          this.orderTableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        }
      });
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchTableList();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchTableList();
    },
    resetSearchCondition () {
      resetObjNull(this.searchCondition);
    }
  },
  mounted () {
    this.$store.commit('initDict');
    this.searchTableList();
  }
};
</script>
